import React from 'react';
import { connect } from 'umi';
import { Form, Input, Button } from 'antd';
import { history } from 'umi';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { phoneReg } from '@/common/regular';
import { useState } from 'react';
import './index.less';
import { notification } from 'antd';
import md5 from 'md5';
import Mask from '@/components/Mask';
const App = ({ loading, dispatch, callback, width, show, onClose }) => {
  const [form] = Form.useForm();
  const [timeRule, setTimeRule] = useState({ visible: true, num: null });
  const { visible, num } = timeRule;
  const handleLogin = () => {
    form.validateFields().then((val) => {
      const { password } = val;
      dispatch({
        type: 'login/fakeResetPassword',
        payload: {
          ...val,
          password: md5(password),
        },
        callback: () => {
          onClose();
          notification.success({
            message: '温馨提示',
            description: `密码重置成功`,
          });
        },
      });
    });
  };
  const handleSmsCode = () => {
    form.validateFields(['mobile']).then((val) => {
      dispatch({
        type: 'login/fakeSmsCode',
        payload: {
          ...val,
          smsType: 'organizationAdminLogin',
        },
        callback: () => {
          if (!visible) {
            return;
          }
          let time = 0;
          let timeInterface = setInterval(() => {
            time += 1;
            if (time >= 60) {
              setTimeRule({ visible: true, num: 60 });
              clearInterval(timeInterface);
            } else {
              setTimeRule({ visible: false, num: 60 - time });
            }
          }, 1000);
        },
      });
    });
  };
  return (
    <Mask onOk={handleLogin} width={width} visible={show} onClose={onClose}>
      <>
        <div className="find-pass-title">修改密码</div>
        <Form form={form} name="horizontal_login" layout="inline">
          <div className="formInput_box">
            <Form.Item
              name="mobile"
              className="formInput_box"
              rules={[
                {
                  required: true,
                  message: '请输入手机号',
                },
                { pattern: phoneReg, message: '请输入正确的手机号' },
              ]}
            >
              <Input style={{ height: 40 }} placeholder="手机号" />
            </Form.Item>{' '}
          </div>
          <div className="formInput_box">
            <Form.Item
              name="smsCode"
              className="formInput_box"
              rules={[
                {
                  required: true,
                  message: '请输入验证码',
                },
              ]}
            >
              <Input style={{ height: 40 }} placeholder="验证码" />
            </Form.Item>
            <div
              onClick={handleSmsCode}
              className={`code-button ${!visible ? 'code-button-opcity' : null}`}
            >
              {visible ? '获取验证码' : `获取验证码(${num})`}
            </div>
          </div>
          <div className="formInput_box">
            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入新密码',
                },
              ]}
            >
              <Input.Password
                style={{ height: 40 }}
                placeholder="新密码：6-16字，同时包含数字和字母"
              />
            </Form.Item>
          </div>
        </Form>
      </>
    </Mask>
  );
};

export default connect(({ loading }) => ({
  loading: loading.models.login,
}))(App);
